<template>
    <Card shadow>
        <div>
            <div class="message-page-con message-category-con">
                <Menu width="auto" active-name="unread" @on-select="handleSelect">
                    <MenuItem name="unread">
                        <span class="category-title">未读消息</span><Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
                    </MenuItem>
                    <MenuItem name="readed">
                        <span class="category-title">已读消息</span
                        ><Badge style="margin-left: 10px" class-name="gray-dadge" :count="messageReadedCount"></Badge>
                    </MenuItem>
                    <MenuItem name="trash">
                        <span class="category-title">回收站</span
                        ><Badge style="margin-left: 10px" class-name="gray-dadge" :count="messageTrashCount"></Badge>
                    </MenuItem>
                </Menu>
            </div>
            <div class="message-page-con message-list-con">
                <Spin fix v-if="listLoading" size="large"></Spin>
                <Menu width="auto" active-name="" :class="titleClass" @on-select="handleView">
                    <MenuItem v-for="item in messageList" :name="item.msg_id" :key="`msg_${item.msg_id}`">
                        <div>
                            <p class="msg-title">{{ item.title }}</p>
                            <Badge status="default" :text="item.create_time" />
                            <Button
                                style="float: right; margin-right: 20px"
                                :style="{display: item.loading ? 'inline-block !important' : ''}"
                                :loading="item.loading"
                                size="small"
                                :icon="currentMessageType === 'readed' ? 'md-trash' : 'md-redo'"
                                :title="currentMessageType === 'readed' ? '删除' : '还原'"
                                type="text"
                                v-show="currentMessageType !== 'unread'"
                                @click.native.stop="removeMsg(item)"
                            ></Button>
                        </div>
                    </MenuItem>
                </Menu>
            </div>
            <div class="message-page-con message-view-con">
                <Spin fix v-if="contentLoading" size="large"></Spin>
                <div class="message-view-header">
                    <h2 class="message-view-title">{{ showingMsgItem.title }}</h2>
                    <time class="message-view-time">{{ showingMsgItem.create_time }}</time>
                </div>
                <div v-html="messageContent"></div>
            </div>
        </div>
    </Card>
</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
const listDic = {
    unread: 'messageUnreadList',
    readed: 'messageReadedList',
    trash: 'messageTrashList'
}
export default {
    name: 'message_page',
    data() {
        return {
            listLoading: true,
            contentLoading: false,
            currentMessageType: 'unread',
            messageContent: '',
            showingMsgItem: {}
        }
    },
    computed: {
        ...mapState({
            messageUnreadList: (state) => state.user.messageUnreadList,
            messageReadedList: (state) => state.user.messageReadedList,
            messageTrashList: (state) => state.user.messageTrashList,
            messageList() {
                return this[listDic[this.currentMessageType]]
            },
            titleClass() {
                return {
                    'not-unread-list': this.currentMessageType !== 'unread'
                }
            }
        }),
        ...mapGetters(['messageUnreadCount', 'messageReadedCount', 'messageTrashCount'])
    },
    methods: {
        ...mapMutations([
            //
        ]),
        ...mapActions(['getContentByMsgId', 'getMessageList', 'hasRead', 'removeReaded', 'restoreTrash']),
        stopLoading(name) {
            this[name] = false
        },
        handleSelect(name) {
            this.currentMessageType = name
        },
        handleView(msg_id) {
            this.contentLoading = true
            this.getContentByMsgId({msg_id})
                .then((content) => {
                    this.messageContent = content
                    const item = this.messageList.find((item) => item.msg_id === msg_id)
                    if (item) this.showingMsgItem = item
                    if (this.currentMessageType === 'unread') this.hasRead({msg_id})
                    this.stopLoading('contentLoading')
                })
                .catch(() => {
                    this.stopLoading('contentLoading')
                })
        },
        removeMsg(item) {
            item.loading = true
            const msg_id = item.msg_id
            if (this.currentMessageType === 'readed') this.removeReaded({msg_id})
            else this.restoreTrash({msg_id})
        }
    },
    mounted() {
        this.listLoading = true
        // 请求获取消息列表
        this.getMessageList()
            .then(() => this.stopLoading('listLoading'))
            .catch(() => this.stopLoading('listLoading'))
    }
}
</script>

<style lang="less">
.message-page {
    &-con {
        height: ~'calc(100vh - 176px)';
        display: inline-block;
        vertical-align: top;
        position: relative;
        &.message-category-con {
            border-right: 1px solid #e6e6e6;
            width: 200px;
        }
        &.message-list-con {
            border-right: 1px solid #e6e6e6;
            width: 230px;
        }
        &.message-view-con {
            position: absolute;
            left: 446px;
            top: 16px;
            right: 16px;
            bottom: 16px;
            overflow: auto;
            padding: 12px 20px 0;
            .message-view-header {
                margin-bottom: 20px;
                .message-view-title {
                    display: inline-block;
                }
                .message-view-time {
                    margin-left: 20px;
                }
            }
        }
        .category-title {
            display: inline-block;
            width: 65px;
        }
        .gray-dadge {
            background: gainsboro;
        }
        .not-unread-list {
            .msg-title {
                color: rgb(170, 169, 169);
            }
            .ivu-menu-item {
                .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only {
                    display: none;
                }
                &:hover {
                    .ivu-btn.ivu-btn-text.ivu-btn-small.ivu-btn-icon-only {
                        display: inline-block;
                    }
                }
            }
        }
    }
}
</style>
